<template>
	<view class="detail" v-if="showpage">
		<uni-popup ref="popupsuccess" type="message">
			<uni-popup-message type="success" message="刷新成功" :duration="2000"></uni-popup-message>
		</uni-popup>

		<view class="detail-content">
			<view class="detail-image"><img :src="fromData.image" mode="widthFix" alt=""></view>
			<view class="detail-title">{{ fromData.title }}</view>
			<view class="detail-unit">
				￥ {{ fromData.sale_price }} 元/{{ fromData.sku_unit }} {{ fromData.sku_unit_desc }}
			</view>
			<view class="detail-jieshao">产品介绍</view>
			<view class="detail-html">
				<u-parse :content="fromData.content" :noData="noData"></u-parse>
			</view>

			<div class="detail-tel" v-if="fromData.tel.length > 0">
				<view><a :href="'tel:' + fromData.tel">商家电话：{{ fromData.tel }}</a></view>
			</div>

			<view class="detail-form">
				<view class="detail-form_input">
					<text>收&nbsp件&nbsp人&nbsp：</text>
					<input v-model="name" type="text" value="" />
				</view>
				<view class="detail-form_input">
					<text>手机号码：</text>
					<input type="text" v-model="tel" value="" />
				</view>
				<view class="detail-form_input">
					<text>购买数量：</text>
					<input v-model="number" style="width: 30px;margin-right: 10px;text-align: center;" type="number"
						value="" />
					<text>{{ fromData.sku_unit }}</text>
				</view>
				<view class="detail-form_input">
					<text>邮寄地址：</text>
					<textarea v-model="address" value="" placeholder="" />
				</view>
				<view class="detail-form_input" style="text-align: right;">
					<text>共计：</text>
					<text style="color:red">{{ fromData.sale_price * number }} 元
					</text>
				</view>
			</view>

			<view class="detail-btn">
				<!-- <button size="mini" style="border:1px solid #ccc" @click="toTelKefu" type="default">咨询客服</button> -->
				<button type="primary" @click="shopping" class="login-btn">立即购买</button>
			</view>

			<view class="block-content__images">

				<view class="block-content__images-image" v-for="(img, i) in fromData.images" :key="i">
					<image :src="handler(img)" mode="widthFix" @tap="previewOpen($event, fromData.images)"
						:data-src="img"></image>
				</view>

			</view>
		</view>


		<previewImage ref="previewImage" :opacity="0.8" :circular="true" @longPress="longPress"></previewImage>

	</view>
</template>

<script>
	import wx from 'weixin-js-sdk';
	import uParse from '@/components/gaoyia-parse/parse.vue'
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'
	import {
		mapState
	} from 'vuex'
	import {
		substr
	} from '@/utils/index.js'

	export default {
		components: {
			uParse,
			previewImage
		},
		computed: {
			...mapState(['userinfo']),
			...mapState(['systemData'])
		},
		data() {
			return {
				fromData: {},
				noData: '<p style="text-align:center;color:#666;">详情加载中...</p>',
				showpage: false,
				name: '',
				address: '',
				tel: '',
				number: 1
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 获取文章内容
			this.getDetail()

			// 提示刷新成功
			setTimeout(() => {
				//停止加载
				uni.stopPullDownRefresh();
				//提示刷新成功
				this.$refs.popupsuccess.open()
				//隐藏加载
				uni.hideLoading()
			}, 1000)

		},
		onLoad(query) {
			// 获取文章内容
			this.getDetail(query.id)
		},
		onShow() {
			//未登录检测,跳转到登录页面
			if (!this.userinfo) {
				uni.showModal({
					content: '请先微信登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login?reffer=' + encodeURIComponent(window.location
									.href)
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/tabbar/orderlist/orderlist'
							})
						}
					}
				});

				return
			}

      this.name = this.userinfo.nickname
			this.address = this.userinfo.address
			this.tel = this.userinfo.mobile
		},
		methods: {
			// 购买
			shopping() {
				if (!this.name) {
					uni.showToast({
						title: '收件人不能为空~',
						icon: 'none',
						mask: true,
					})
					return false;
				}

				if (!this.tel) {
					uni.showToast({
						title: '手机号码不能为空~',
						icon: 'none',
						mask: true,
					})
					return false;
				}

				if (!(/^1[3456789]\d{9}$/.test(this.tel))) {
					uni.showToast({
						title: '手机号码不合法，请重新输入~',
						icon: 'none',
						mask: true,
					})
					return false;
				}

				if (!this.number || this.number < 1) {
					uni.showToast({
						title: '购买数量必须大于1~',
						icon: 'none',
						mask: true,
					})
					return false;
				}

				if (!this.address) {
					uni.showToast({
						title: '邮寄地址不能为空~',
						icon: 'none',
						mask: true,
					})
					return false;
				}

				// 下单
				this.$api.order({
					'openid': this.userinfo.openid,
					'wxuser_id': this.userinfo.id,
					'shopping_id': this.fromData.id,
					'name': this.name,
					'tel': this.tel,
					'address': this.address,
					'order_price': this.fromData.sale_price * this.number,
					'discount_price': 0, //优惠金额，兼容后期加
					'number': parseInt(this.number),
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true,
						})
					} else if (res.code == 1) {
						// 成功之后，再支付
						var amount = res.data.actual_pay_price;
						var method = 'web';
						var tradeNo = res.data.trade_no;
						var openid = this.userinfo.openid
						var title = this.fromData.name + ' ' + this.number + this.fromData.sku_unit;

						window.location.href = this.apiHost + "/api.php/wxpay/pay?amount=" + amount +
							"&type=wechat&method=" + method + '&openid=' + openid + '&out_trade_no=' + tradeNo +
							'&title=' + title;
					}
				});

				// 修改地址
				this.$api.editUserAddress({
					'wxuser_id': this.userinfo.id,
					'address': this.address,
				}).then();
				
				// 修改号码
				this.$api.editUserMobile({
					'wxuser_id': this.userinfo.id,
					'mobile': this.tel,
				}).then();
			},

			//拨打电话
			toTelKefu() {
				uni.makePhoneCall({
					phoneNumber: '025-86193272'
				});
			},

			previewOpen(e, imgsarr) {
				var param = e.currentTarget.dataset.src
				this.$refs.previewImage.open(param, imgsarr)
			},
			//长按图片
			longPress(data) {

			},
			handler(img) {
				return img + '-sl100';
			},
			// 获取内容
			getDetail(nid) {
				this.$api.getShopping({
					id: nid
				}).then(res => {

					if (res.code === 1) {
						this.fromData = res.data

						uni.setNavigationBarTitle({
							title: res.data.name
						})

						// 获取基本参数, 分享用
						this.shareWx(this.fromData.name, this.fromData.title, this.fromData.image)

						//显示页面
						this.showpage = true
					}
				}).catch(err => {
					console.log(err)
				})
			},

		}
	}
</script>

<style lang="scss">
	.detail {
		padding: 0 0 15px;

		.detail-image {
			max-width: 100%;
			display: block;

			img {
				max-width: 100%;
			}
		}

		.detail-unit {
			padding: 5px 15px;
			color: red;
		}

		.detail-jieshao {
			border: 1px solid #ccc;
			margin: 15px;
			padding: 10px 0;
			text-align: center;
		}

		.detail-title {
			padding: 0 15px;
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}

		.detail-content {
			min-height: 500px;

			.detail-html {
				padding: 15px 15px 0;
			}

			.detail-tel {
				padding: 0 15px;

				a {
					color: green;
					text-decoration: unset;
				}
			}

			.detail-form {
				padding: 15px;

				.detail-form_input {
					display: flex;
					align-items: center;
					padding: 5px 0;

					input {
						border: 1px solid #ccc;
						width: 70%;
						padding: 5px;
					}
					
					textarea{
						border: 1px solid #ccc;
						width: 70%;
						padding: 5px;
						height: 180upx;
					}
				}
			}

			.detail-btn {
				padding: 15px;

				.login-btn {
					background: #f07373;
				}
			}

		}

		.detail-header__button {
			padding: 0 15px;
			flex-shrink: 0;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			font-size: 12px;
			background-color: $mk-base-color;
			color: #fff;
		}

		.popup-wrap {
			background-color: #fff;

			.popup-header {
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				color: #666;
				border-bottom: 1px solid #f5f5f5;

				.popup-header__item {
					height: 50px;
					line-height: 50px;
					padding: 0 15px;
				}
			}

			.popup-content {
				width: 100%;
				padding: 15px;
				box-sizing: border-box;

				.popup-textarea {
					width: 100%;
					height: 200px;
				}

				.popup-count {
					display: flex;
					justify-content: flex-end;
					font-size: 12px;
					color: #999;
				}
			}
		}

		.block-content__images {
			padding: 10px;
			display: flex;
			flex-wrap: wrap;
			margin-top: 5px;
			overflow: hidden;

			.block-content__images-image {
				width: 80px;
				font-size: 0;
				margin-right: 2px;
				margin-top: 2px;
				font-size: 0;
				position: relative;

				image {
					width: 80px;
					height: auto;
				}

				.block-content__images-image-more {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0, 0, 0, .3);
					z-index: 2;
					color: #fff;
					font-size: 14px;
					display: flex;
					justify-content: center;
					padding: 24%;
					text-align: center;
					line-height: 1.6;
				}
			}
		}

		.block-content__desc {
			padding: 10px;
			font-size: 12px;
			color: gray;

			.tel {
				display: flex;
				align-items: center;

				.tel-mobile {
					font-size: 14px;
					margin-left: 2px;
				}


				image {
					width: 15px;
				}
			}
		}
	}
</style>
